<template>
  <div style="width: 210px">
    <el-time-picker
      v-model="beginTime"
      :disabled="disabled"
      style="width:100px"
      value-format="HH:mm"
      format="HH:mm"
      :placeholder="$t('startDate')"
      @change="change"
    />
    <el-time-picker
      v-model="endTime"
      :disabled="disabled"
      style="width:100px"
      value-format="HH:mm"
      format="HH:mm"
      :placeholder="$t('endDate')"
      @change="change"
    />
  </div>
</template>

<script>
export default {
  name: 'TimeSlot',
  model: {
    prop: 'time',
    event: 'change'
  },
  props: {
    time: String,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      beginTime: '00:00',
      endTime: '00:00'
    }
  },
  watch: {
    time: {
      deep: true,
      handler(val) {
        if (this.time != null && this.time.indexOf(' / ') !== -1) {
          const time = this.time.split(' / ')
          this.beginTime = time[0]
          this.endTime = time[1]
        } else {
          this.beginTime = '00:00'
          this.endTime = '00:00'
        }
      }
    }
  },
  created() {
    if (this.time != null && this.time.indexOf(' / ') !== -1) {
      const time = this.time.split(' / ')
      this.beginTime = time[0]
      this.endTime = time[1]
    } else {
      this.beginTime = '00:00'
      this.endTime = '00:00'
    }
  },
  methods: {
    change() {
      this.$emit('change', this.beginTime + ' / ' + this.endTime)
    }
  }
}
</script>


